[コピペでOK]HTML5でWebページ作成時のテンプレ
![[コピペでOK]HTML5でWebページ作成時のテンプレ](https://todoonada.co.jp/wp-content/uploads/2018/05/html-lightgreen.png)
HTML5でWebページ作成時のテンプレートを紹介したいと思います。
LPページなどを作成したり、wordpressでテーマ作成時のモックに利用したりと何かと必要になるケースはありますので、
今回の記事をコピペして利用してください。
コピペで使えるHTML
コピペOSで使えるHTMLは↓になります。
<!DOCTYPE html>
<html lang="jp">
<head>
<title>サンプルページ</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- ↓に読み込むCSSファイルを設定 -->
<link rel="stylesheet" href="">
<link rel="icon" href="">
</head>
<body>
<!-- ここからHTMLでマークアップする -->
<!-- JQeryを読み込む -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<!-- 自分で作成したJavaScriptを読み込む -->
<script src="○○.js"></script>
</body>
</html>コピペで使えるHTMLの解説編８
ではコピペした要素とその意味を周回します。
****では、この文書はHTMLです、ということを宣言しています。 一番最初に書く必要がある点に注意してください。
< html lang=jp>では、この文書は日本語で書かれています。ということを宣言しています。 これもこの位置にしか書くことができません。
<title>はページのタイトルを表示します。 <head>タグに入れないといけない点に注意してください。
< meta charset=utf-8>では文書の文字コードを選択しています。 一般的にはUTF-8 を利用します。HTHLファイルの文字コードをUTF-8で記載していくことを忘れずに行ってください。
<meta name=description content=>
< meta name=description content=>はこの文書にはどんな内容が書かれているかサマリ を記載します。
content= の中に120文字 で記載してください。
Google検索ではここに記載された内容がサマリとして表示されます。
<meta name=author content=>
< meta name=author content=>はこの文書は誰が書いたか を記載します。
content= の中にHTMLの作成者 を記載してください。
Google検索ではここに記載された内容がサマリとして表示されます。
<meta name=keywords content=>
**< meta name=keywords content=>**はこの文書のキーワードを書いていきます。
content= の中にHTMLの内のキーボード を記載してください。
複数設定する場合にはカンマ記号「,」を使用します。
キーワードの数は3つ程度 に抑えるようにしましょう。
<meta name=viewport content=width=device-width, initial-scale=1, shrink-to-fit=no>
このタグは表示領域 を指定します。スマホ・タブレット・パソコンなど様々な端末に表示させる時に利用します。
※分からない人はコピペでOKです。気になる人は調べてみてください。
<link rel=stylesheet href=>
**< link rel=stylesheet href=>**はスタイルシート「CSS」を指定するマークアップになります。
**< link rel=icon href=>**はファビコン（左上のサイトイメージ）を表示するマークアップになります。
<script src="https://code.jquery.com/jquery-X.X.X.slim.min.js">
最も一般的なJavaScriptライブライである、JQuery を読み込むタグになります。
JQueryはダウンロードしてローカルサーバー上から読み込みこともできますが、
今回の例ではJQueryの公開サーバ上から読み込んでいます。
またJQueryはバージョンに注意してください。
JavaScriptの読み込みはタグ終了の直前に書き込むのが一般的です。
実施で作成したJavaScript を読み込むと時に使用します。
JavaScriptの読み込みはタグ終了の直前に書き込むのが一般的です。
内容をより詳しく知りたい人は↓の本をオススメします！
HTML5＆CSS3デザインレシピ集posted with ヨメレバ
狩野祐東 技術評論社 2017年02月22日
